<template>
  <div>
    <a-modal :visible="visible" title="库存初始化" :footer="false" @before-open="open" @ok.stop="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="600px" :mask-closable="false">
      <div>
        <a-button class="gray-outline" @click="init" :loading="loading">立即初始化</a-button>
        <a-table style="margin-top: 10px" ref="table" size="mini" class="table-singe-line" v-model:selectedKeys="rowSelectList" @selection-change="selectColumn" row-key="id" :row-selection="rowSelection" :columns="columns" :data="tableList" :pagination="false" :scroll="{ x: '100%', y: '300px' }">
          <template #columns>
            <a-table-column title="sellerID" :width="100">
              <template #cell="{ record }">
                {{ record.sellerId }}
              </template>
            </a-table-column>
            <a-table-column title="店铺名称" :width="100">
              <template #cell="{ record }">
                {{ record.shopName }}
              </template>
            </a-table-column>
            <a-table-column title="店长" :width="100">
              <template #cell="{ record }">
                {{ record.masterName }}
              </template>
            </a-table-column>
            <a-table-column title="基础API授权" :width="140">
              <template #cell="{ record }">
                {{ $setTime(record.gmtCreate) }}
              </template>
            </a-table-column>
          </template>
        </a-table>

        <div style="font-size: 12px; color: darkgray">
          <p>注意：</p>
          <p>亚马逊店铺FBA库存初始化，需要保证初始化的店铺已经完成基础的API授权，初始化过程需要通过接口获取FBA库存报告。</p>
          <p>已经完成初始化的店铺无法进行二次初始化，如果确实需要进行二次初始化，请联系ERP产品经理将该店铺已有的库存数据清空掉再进行初始化</p>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { listFbaInventoryInitFinishedShop, fbaInventoryInit, createFbaMappedWarehouse } from '@/api/inventory'
  import { findShopListByParam } from '@/api/system'
  import { Message } from '@arco-design/web-vue'
  import { init } from 'echarts/core'
  export default defineComponent({
    props: ['detail', 'ids', 'remarkText'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const table = ref()
      const data: any = reactive({
        tableList: [],
        rowSelectList: [],
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
        },
        loading: false,
      })

      const open = async () => {
        const allShop = await findShopListByParam()
        const initShop = await listFbaInventoryInitFinishedShop()
        if (initShop.data.length <= 0) {
          data.tableList = allShop.data
        } else {
          allShop.data.forEach((e: any) => {
            let i = initShop.data.findIndex((el: any) => el?.sellerId == e.sellerId)
            if (i == -1) {
              data.tableList.push(e)
            }
          })
        }

        console.log(data.tableList)
      }
      const init = async () => {
        if (data.rowSelectList.length <= 0) {
          return Message.error('请选择需要操作的数据')
        }
        data.loading = true
        await createFbaMappedWarehouse()
        const res: any = await fbaInventoryInit({ shopIds: data.rowSelectList })
        if (res.code == 'SUCCESS') {
          Message.success('初始化成功')
          data.rowSelectList = []
          visible.value = false
          data.loading = false
        }
      }
      const handleCancel = () => {
        data.loading = false
        visible.value = false
      }

      return {
        ...(toRefs(data) as any),
        visible,
        formRef,
        open,
        init,
        handleCancel,
        table,
      }
    },
  })
</script>

<style lang="less" scoped></style>
